<template>
	<view>
		<view class="index_seach">
			<view class="index_input">
				<img class="seach_img" src="https://www.leedong.top/img/seach.png" alt="" srcset="" />
				<input confirm-type="search" @confirm="doSearch" maxlength="1" v-model="seachVal"
					placeholder="请输入想要查询的字(单字)" placeholder-class="pla" style="padding-left: 50px;" />
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index">


			<view class="details">
				<view class="mi">
					<view class="mibg">
						<text>{{item.zi}}</text>
					</view>
					<view class="words_details">
						<view class="content">
							<view class="text">
								<text>拼音</text>
							</view>
							<view class="words">
								<text>{{item.pinyin}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>部首</text>
							</view>
							<view class="words">
								<text>{{item.bushou}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>部首笔画</text>
							</view>
							<view class="words">
								<text>{{item.bushoubh}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>总笔画</text>
							</view>
							<view class="words">
								<text>{{item.zbh}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>汉字五行</text>
							</view>
							<view class="words">
								<text>{{item.hzwx}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>吉凶寓意</text>
							</view>
							<view class="words">
								<text>{{item.jxyy}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>是否为常用字</text>
							</view>
							<view class="words">
								<text>{{item.cyz}}</text>
							</view>
						</view>
						<view class="content">
							<view class="text">
								<text>姓名学</text>
							</view>
							<view class="words">
								<text>{{item.xmx}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="xaingxi">
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">笔顺读写</text>
					</view>
					<view class="d">
						{{item.bsdx}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">基本解释</text>
					</view>
					<view class="d">
						{{item.jbjs}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">新华字典详细解释</text>
					</view>
					<view class="d">
						{{item.xhzdxxjs}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">汉语大字典解释</text>
					</view>
					<view class="d">
						{{item.hydzdjs}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">康熙字典解释</text>
					</view>
					<view class="d">
						{{item.kxzdjs}}
					</view>
				</view>
				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">说文解字详解</text>
					</view>
					<view class="d">
						{{item.swjzxj}}
					</view>
				</view>



				<view class="c">
					<view class="t">
						<text class="shu"></text>
						<text class="f">相关词语</text>
					</view>
					<view class="d">
						{{item.xgcy}}
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seachVal: '',
				list: [],
				rows: 6, // 米字格的行数
				cols: 8, // 米字格的列数
				names: []
			}
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "中国汉字博大精深",


			}

		},
		//2.分享到朋友圈
		onShareTimeline() {

			return {
				title: '中国汉字博大精深',


			}
		},
		onLoad(e) {},
		methods: {
			
			doSearch() {
				uni.showLoading({
					title:'加载中...'
				})
				this.$api.queryzidian({
					content: this.seachVal
				}).then(res => {
					if (res.rows.length == 0) {
						uni.showToast({
							title: '没有找到该文字'
						})
						uni.hideLoading()
						return
					}
					console.log(res)
					this.list = res.rows;
						uni.hideLoading()

				})
			}
		}
	}
</script>

<style lang="scss">
	.details {
		background: #f6f2ef;
		height: 265rpx;

		text {
			user-select: all;
		}

		.mi {
			display: flex;
			padding: 10px;

			.mibg {
				width: 200rpx;
				height: 200rpx;
				background-image: url(https://www.leedong.top/img/mi.png);
				background-size: 100% 100%;
				text-align: center;
				line-height: 200rpx;

				text {
					font-size: 145rpx;
					color: #db143a;
					font-weight: 600;
					font-family: cursive;
				}
			}

			.words_details {
				width: calc(100vw - 114px);
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.content {
					display: flex;
					padding-left: 10rpx;
					margin-top: 10rpx;

					.text {

						min-width: 60px;
						height: 20px;
						text-align: center;
						font-size: 26rpx;
						color: #000;
						border: 1px solid #bf9380;
						border-radius: $uni-border-radius-base;
						line-height: 20px;
						background-color: #f1ded5;
					}

					.words {
						padding-left: 10rpx;
					}
				}
			}
		}
	}

	.xaingxi {
		background: #f6f2ef;

		text {
			user-select: all;
		}

		.c {
			margin-top: 10px;

			.t {
				font-size: 30rpx;
				width: 100%;
				padding: 10px;

				display: flex;

				.f {
					padding: 0 10rpx;
				}

				.shu {
					width: 4px;
					height: 24px;

					background-color: #9d9e97;
				}
			}

			.d {
				padding-left: 10px;
			}
		}
	}
</style>